<template>
  <div v-loading="userStore.loading">
    <section>
      <div class="leaves">
        <div class="set">
          <div><img src="../../assets/images/leaf_01.png" /></div>
          <div><img src="../../assets/images/leaf_02.png" /></div>
          <div><img src="../../assets/images/leaf_03.png" /></div>
          <div><img src="../../assets/images/leaf_04.png" /></div>
          <div><img src="../../assets/images/leaf_01.png" /></div>
          <div><img src="../../assets/images/leaf_02.png" /></div>
          <div><img src="../../assets/images/leaf_03.png" /></div>
          <div><img src="../../assets/images/leaf_04.png" /></div>
        </div>
      </div>
      <img src="../../assets/images/bg.jpg" class="bg" />
      <img
        src="../../assets/images/dog.png"
        class="dog"
        style="margin-top: 200px"
      />
      <img src="../../assets/images/trees.png" class="trees" />
      <div class="login">
        <div class="title">社区宠物信息管理系统</div>
        <div class="innner">
          <div class="inputBox">
            <input
              type="text"
              v-model="formData.username"
              @input="handleUsernameInput"
              @keypress.enter.native="submit"
              placeholder="账号"
            />
            <div v-show="isShowUsernameTip" class="gray-tip">
              {{ tip.usernameTip }}
            </div>
          </div>
          <div class="inputBox" style="margin-top: 30px">
            <input
              type="password"
              @input="handlePasswordInput"
              @keypress.enter.native="submit"
              v-model="formData.password"
              placeholder="密码"
            />
            <div v-show="isShowPasswordTip" class="gray-tip">
              {{ tip.passwordTip }}
            </div>
          </div>
          <div class="inputBox" style="margin-top: 30px">
            <input type="submit" @click="submit" value="登录" id="btn" />
          </div>
          <div class="group" style="margin-top: 20px">
            <a @click="handleEditPassword">忘记密码</a>
            <!-- <a href="#"></a> -->
            <router-link to="/register">注册</router-link>
          </div>
        </div>
      </div>
    </section>
  </div>
  <EditPassword ref="editPasswordRef" />
</template>

<script setup lang="ts">
import "@/style/login.css";
import { reactive, ref, onMounted } from "vue";
import EditPassword from "./edit-password.vue";
//form表单
type FormDataType = {
  username: string;
  password: string;
};
const formData = reactive<FormDataType>({
  username: "",
  password: "",
});

const editPasswordRef = ref();
const handleEditPassword = () => {
  editPasswordRef.value.showDialog();
};
//==========   登录（路由跳转）  ===========
import { useRouter } from "vue-router";
import { userLogin } from "@/api/user";
import { ElMessage } from "element-plus";

const router = useRouter(); //路由跳转
//登录
const submit = async () => {
  if (
    !formData.username ||
    formData.password.length < 5 ||
    formData.password.length > 8
  ) {
    ElMessage({
      message: "输入格式不对，请重新输入",
      type: "warning",
    });
    return;
  }
  userStore.loading = true;
  await userLogin(formData).then(async (res: any) => {
    if (!res) {
      return;
    }

    userStore.isLogin = true;
    userStore.userDesc = res.data; //保存角色信息
    userStore.roleMenu = userStore.handleUserMenu(userStore.userDesc.userType); //获取角色路由菜单
    ElMessage({
      message: "登录成功",
      type: "success",
    });
    switch (userStore.userDesc.userType) {
      case "0":
        await router.push("/owner");
        break;
      case "1":
        await router.push("/manager");
        break;
      case "2":
        await router.push("/super");
        break;
    }

    userStore.loading = false;
  });
};

//输入框提示
const tip = {
  usernameTip: "用户名长度2-8个字符",
  passwordTip: "密码长度5-8个字符",
};
const isShowUsernameTip = ref<boolean>(false);
const isShowPasswordTip = ref<boolean>(false);
// 节流（账号密码输入框校验）
var PassWordTimer: any = null;
const handlePasswordInput = () => {
  if (PassWordTimer != null) {
    clearTimeout(PassWordTimer);
    PassWordTimer = null;
  }
  PassWordTimer = setTimeout(() => {
    if (
      (formData.password && formData.password.length < 5) ||
      formData.password.length > 8
    ) {
      isShowPasswordTip.value = true;
    } else isShowPasswordTip.value = false;
  }, 300);
};
var usernameTimer: any = null;
const handleUsernameInput = () => {
  if (usernameTimer != null) {
    clearTimeout(usernameTimer);
    usernameTimer = null;
  }
  usernameTimer = setTimeout(() => {
    if (
      (formData.password && formData.password.length < 5) ||
      formData.password.length > 8
    ) {
      isShowPasswordTip.value = true;
    } else isShowPasswordTip.value = false;
  }, 300);
};
//=============    store   =================
import { useUserStore } from "@/stores/user";
import { useTabsStore } from "@/stores/tabs";
const userStore = useUserStore(); //pinia
const tabsStore = useTabsStore();
//置空登录信息
onMounted(async () => {
  userStore.userDesc = {};
  userStore.isLogin = false;
  tabsStore.activeKey = "";
  tabsStore.tabsList = [];
});
</script>

<style scoped lang="less"></style>
